/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  View,
  Platform,
  BackHandler
} from 'react-native';
import { Tabs } from 'antd-mobile';
import Request from '../../publicServer/request'
import { TabNavigator } from 'react-navigation';
import Java from './sub/template';
import ListDemo from '../list/List'

export default class Popular extends Component {
  //这个用用来设置路由的
  // static navigationOptions = ({navigation, screenProps}) => ({
  //   // 这里面的属性和App.js的navigationOptions是一样的。
  //   headerStyle: {
  //     backgroundColor: screenProps ?
  //       screenProps.themeColor : '#4ECBFC'
  //   }
  // });

  constructor(props) {
    super(props);
    this.state = {
      result:'',
      boolean:false
    }
  }

  componentDidMount() {
    console.log(123)

    Request.get('http://rapapi.org/mockjsdata/20823/adminManage/order')
      .then(res => {
        console.log(res)
        this.setState({
          result:res.data,
          boolean:true
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  goToDetail() {
    let { navigation } = this.props;
    console.log(this.props)
    navigation.navigate('MyDetail', { params: 'xnw' })
  }
  onPressButton(){
    console.log(this.props);
    this.props.navigation.navigate('List')
  }
  render() {
    const tabs = [
      { title: 'java'},
      { title: 'ios' },
      { title:  'js' },
    ];
    const style = {
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: 150,
      backgroundColor: '#fff',
    };

    return (
      <View style={{flex:1}}>
        <Tabs
          tabs={tabs}
          initialPage={0}
        >
          <View>
            {this.state.boolean && <Java data={this.state.result}/>}
          </View>
          <View style={styles.styleExample}>
            <ListDemo {...this.props}/>
          </View>
          <View style={style}>
            <Text>
              Content of Third Tab
            </Text>
          </View>
        </Tabs>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  styleExample:{
    flex:1,

  }
});

AppRegistry.registerComponent('Popular', () => Popular);
